
.container {
  padding: 40px 80px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  transform: perspective(800px);
  transform-style: preserve-3d;
}
.card {
  position: relative;
  flex: 0 0 240px;
  width: 240px;
  height: 320px;
  background-color: #333;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 
    rgb(0 0 0 / 66%) 0 30px 60px 0, 
    inset #333 0 0 0 5px, 
    inset rgb(255 255 255 / 50%) 0 0 0 6px;
  transition: 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
}
.card:hover {
  transition:
    0.6s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 2s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow:
    rgb(255 255 255 / 0.2) 0 0 40px 5px,
    rgb(255 255 255 / 1) 0 0 0 1px,
    rgb(0 0 0 / 0.66) 0 30px 60px 0,
    inset #333 0 0 0 5px,
    inset white 0 0 0 6px;
}
.img {
  opacity: 0.5;
  position: absolute;
  top: -20px;
  left: -20px;
  width: 100%;
  height: 100%;
  padding: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: 
    1s cubic-bezier(0.445, 0.05, 0.55, 0.95),
    opacity 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  pointer-events: none;
  background-image: url(https://images.unsplash.com/photo-1479660656269-197ebb83b540?dpr=1&auto=compress,format&fit=crop&w=1199&h=798&q=80&cs=tinysrgb&crop=)
}
.card:hover > .img {
  opacity: 0.8;
  transition: 
    0.6s cubic-bezier(0.23, 1, 0.32, 1), 
    opacity 5s cubic-bezier(0.23, 1, 0.32, 1);
}